<template>
    <view class="list">
        <view class="items">
            <view class="label">认证方式</view>
            <view class="values">
                大陆居民身份证
                <image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/arrow-right.png" mode=""></image>
            </view>
        </view>
        <view class="items">
            <view class="label">真实姓名</view>
            <view class="inputs">
                <input v-model="inputVal.name" type="text" placeholder="请输入姓名">
            </view>
        </view>
        <view class="items">
            <view class="label">身份证号</view>
            <view class="inputs">
                <input v-model="inputVal.id_card" type="text" placeholder="请输入身份证号">
            </view>
        </view>
        <view class="submit">
            <view class="btns">
                <image class="btns-img" src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/btn/576x88.png" mode=""></image>
                <view class="btns-con" @click="confirm()">
                    进入人脸识别
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: 'realname', // 实名认证
    data() {
        return {
            inputVal: {
                type: 1, // 认证方式,1大陆居民身份证
                face: 0, // 人脸是否通过0否1是
                id_card: '', // 身份证
                name: '', // 姓名
            }
        }
    },
    onLoad() {

    },
    onShow() {

    },
    methods: {
        confirm(){
            console.log(this.inputVal,'inputVal,表单信息')
            this.$http('real.userReal',this.inputVal).then(res=>{
                console.log(res,'res')
                if(res.code == 1){
                    this.$utils.toast('提交审核')
                    // this.$router.push('/pages/mine/attestation/attestation')
                }else{
                    this.$utils.toast(res.msg)
                }
            
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.list {
    padding: 0 32rpx;
}

.items {
    border-bottom: 1rpx solid #F5F5F5;
    padding: 40rpx 0;
    display: flex;
    align-items: center;
}

.label {
    margin-right: 60rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #2E3033;
}

.values {
    flex: 1;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #8A9199;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    image {
        margin-left: 16rpx;
        width: 40rpx;
        height: 40rpx;
        display: block;
    }
}

.inputs {
    flex: 1;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #8A9199;
}

.submit {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: calc(40rpx + constant(safe-area-inset-bottom));
    bottom: calc(40rpx + env(safe-area-inset-bottom));

    .btns {
        margin: 0 auto;
        width: 576rpx;
        height: 88rpx;
        position: relative;

        &-img {
            width: 100%;
            height: 100%;
        }

        &-con {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 32rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #FAFCFF;
            line-height: 88rpx;
            text-align: center;
        }
    }
}
</style>